首先創造元件
Vue.component('MyName',{
template:'<li>自行定義</li>'
})
加入剛剛新增(MyName)的元件
<ul>
<MyName></MyName>
</ul>
若想在元件裡加入動態,就要利用VUE的props屬性來進行動態變化
Vue.component('MyName',{
props:['todo'],
template:'<li>{{todo.text}}</li>',
})
並且使用v-bind將data綁入元件當中
<div id="app">
<ul>
<MyName v-for="item in number" v-bind:todo="item"></MyName>
</ul>
</div>
Vue.component('MyName',{
props:['todo'],
template:'<li>{{todo.text}}</li>',
})
var app = new Vue({
el:'app',
data:{
number:[
{text:'數字1'},
{text:'數字2'},
{text:'數字3'},
]
},
})
這段程式碼利用 v-for偏歷number這個array,並將提出的元素v-bind給todo這個自定義屬性中。
效果
1.數字1
2.數字2
3.數字3